<template>
  <div class="home">
    <h3>恭喜你成功创建了极简--zx-vue3-admin</h3>
    {{ count }}
    <el-icon :size="24" class="lick" @click="onBtn">
      <Lick />
    </el-icon>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useCounterStore } from '@/store';
import Lick from '@/icon/Like.vue';
import { postTest } from '@/service/common';
const counterStore = useCounterStore();
const count = computed(() => counterStore.count);
const onBtn = () => counterStore.accumulate();
postTest();
</script>
<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 500px;
  margin: 100px auto;
  background: @background;

  h3 {
    margin-bottom: 50px;
    font-size: 20px;
  }

  .lick {
    margin-top: 20px;
    cursor: pointer;
  }
}
</style>
